<template>
	<view>
		<uni-search-bar v-model="queryParams.courseName" class="uni-mt-10" radius="5" placeholder="课程名称"
			clearButton="auto" cancelButton="none" @confirm="handleQuery" />

		<view class="menu-list">
			<uni-list>
				<uni-list-item v-for="item in courseList" :title="item.courseName" :note="item.remark" link to="/pages/service/course/info" @click="handleListItem">
					<template v-slot:header>
						<image class="slot-image" src="/static/logo.png" mode="aspectFit"></image>
					</template>
				</uni-list-item>
			</uni-list>
			<uni-pagination class="margin-top" v-show="total>0" :show-icon="true" :total="total" :pageSize="queryParams.pageSize" @change="handlePage" />
		</view>
	</view>
</template>

<script>
	import {
		listCourse,
		getCourse
	} from "@/api/service/course";

	export default {
		data() {
			return {
				// 遮罩层
				loading: true,
				// 总条数
				total: 0,
				// 课程管理表格数据
				courseList: [],
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 5,
					courseName: null,
				},
			}
		},
		created() {
			this.getList();
		},
		methods: {
			/** 查询课程管理列表 */
			getList() {
				this.loading = true;
				listCourse(this.queryParams).then(response => {
					this.courseList = response.rows;
					this.total = response.total;
					this.loading = false;
				});
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 分页按钮操作 */
			handlePage(e){
				this.queryParams.pageNum = e.current;
				this.getList();
			},
			/** 列表按钮操作 */
			handleListItem(e){
				console.log('执行click事件', e.data)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}

	.slot-image {
		width: 120px;
		height: 60px;
	}
</style>